<template>
  <el-container>
    <el-header>
      <LayoutHeader v-model="activeIndex" />
    </el-header>
    <!-- 流程信息 -->
    <FlowInfo class="flowInfo" v-show="activeIndex === 'flowInfo'"></FlowInfo>
    <!-- 审批表单 -->
    <FormDesign
      class="formDesign"
      v-show="activeIndex === 'formDesign'"
    ></FormDesign>
    <!-- 审批流程 -->
    <ProcessDesign
      class="processDesign"
      v-show="activeIndex === 'processDesign'"
    ></ProcessDesign>
  </el-container>
</template>

<script>
import LayoutHeader from '@/components/flow/LayoutHeader';
import FormDesign from '@/components/flow/form/FormDesign';
import ProcessDesign from '@/components/flow/process/ProcessDesign';
import FlowInfo from '@/components/flow/FlowInfo';
export default {
  components: { LayoutHeader, FormDesign, ProcessDesign, FlowInfo },
  data() {
    return {
      activeIndex: 'formDesign', // 控制显示内容
    };
  },
};
</script>

<style lang="less" scoped>
.el-container {
  height: 100vh;
  .el-header {
    padding: 0;
  }
}
</style>
